// 饼图
function setPie(arr) {
    const myChart = echarts.init(document.querySelector('.pie'));
    let option = {
        // 添加标题组件
        title: {
            text: '籍贯 Hometown',
            textStyle: {
                color: '#6d767e' // 标题演示
            },
        },
        tooltip: {
            // {a} 表示series中的name
            // {b} 表示数据中的series.data中的name
            // {c} 表示每一项的值
            // {d} 表示百分比
            formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
        },
        series: [{
            name: '学员各地分布',
            type: 'pie', // pie 表示饼图
            radius: ['10%', '60%'], // 内外圈的半径
            center: ['50%', '50%'], // 中心点
            roseType: 'area', // area表示面积模式，radius表示半径模式
            itemStyle: { // 每一项的设置
                borderRadius: 4 // 扇形边缘圆角设置
            },
            data: arr
        }]
    }
    myChart.setOption(option);
}
// setPie()
// 折线图
function setLine(obj) {
    const myChart = echarts.init(document.querySelector('.line'));
    let option = {
        // 图例
        legend: {
            top: 20,
        },
        // 鼠标移入的提示
        tooltip: {
            trigger: 'axis', // 轴触发
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        // 标题
        title: {
            text: '薪资 Salary',
            textStyle: {
                color: '#6d767e'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: obj.name
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '50%'],
        },
        // 数据缩放组件
        dataZoom: [{
            type: 'slider',
            start: 0,
            end: 15
        }],
        // 数据部分
        series: [{
                name: '期望薪资',
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: {
                    color: '#ee6666'
                },
                data: obj.salary
            },
            {
                name: '实际薪资',
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { // 单独控制这条线的颜色
                    color: '#5470c6'
                },
                data: obj.truesalary
            }
        ]
    };
    myChart.setOption(option);
}
// setPie2()
// 柱状图
function serBar(obj) {
    const myChart = echarts.init(document.querySelector('.barChart'));
    let option = {
        // 网格（整个图表区域设置）
        grid: {
            top: 30,
            bottom: 30,
            left: '7%',
            right: '7%'
        },
        // 鼠标移入的提示
        tooltip: {
            trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
            axisPointer: { // 坐标轴指示器配置项
                // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // 图例
        legend: {},
        // X轴
        xAxis: [{
            type: 'category',
            data: obj.group,
            axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
                type: 'shadow'
            }
        }],
        // Y轴
        yAxis: [{
                type: 'value',
                min: 0, // y轴数据最小值
                max: 100, // y轴数据最大值
                interval: 10, // step步长，把y轴的数据分成多少份
                axisLabel: { // Y轴文字设置
                    formatter: '{value}分', // Y轴文字
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        // 数据部分（4组数据）
        series: [{
                name: '平均分',
                type: 'bar',
                data: obj.avgScore,
                barWidth: '15',
            },
            {
                name: '低于60分人数',
                type: 'bar',
                data: obj.lt60,
                barWidth: '15',
                yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
            },
            {
                name: '60到80分之间',
                type: 'bar',
                yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
                barWidth: '15',
                data: obj.gt60
            },
            {
                name: '高于80分人数',
                type: 'bar',
                yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
                barWidth: '15',
                data: obj.gt80
            }
        ]
    };
    myChart.setOption(option);
}
// serBar()
// 地图
function setMap(mapData1, mapData2) {
    const myChart = echarts.init(document.querySelector('.map'));
    // 位置+经纬度
    var chinaGeoCoordMap = mapData1
    var chinaDatas = mapData2
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [
        ['顺义校区', chinaDatas]
    ].forEach(function (item, i) {
        series.push({
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.2 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) { //圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 12
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function (val) {
                    return 4 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [5, 0],
                        color: '#9eca7f', // 目标点文字颜色
                        formatter: '{b}',
                        textStyle: {
                            color: "#9eca7f"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60", // 目标点鼠标移入的颜色
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线 From',
            textStyle: {
                color: '#6d767e'
            }
        },
        // tooltip: {
        //   trigger: 'item',
        //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
        //   borderColor: '#FFFFCC',
        //   showDelay: 0,
        //   hideDelay: 0,
        //   enterable: true,
        //   transitionDuration: 0,
        //   extraCssText: 'z-index:100',
        //   formatter: function (params, ticket, callback) {
        //     //根据业务自己拓展要显示的内容
        //     var res = "";
        //     var name = params.name;
        //     var value = params.value[params.seriesIndex + 1];
        //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        //     return res;
        //   }
        // },
        // backgroundColor: "#013954",
        // visualMap: { //图例值控制
        //   min: 0,
        //   max: 1,
        //   calculable: true,
        //   show: false,
        //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    // color: 'rgba(51, 69, 89, .5)', //地图背景色
                    // color: '#5a6fc0', //地图背景色
                    // borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };
    myChart.setOption(option);
}
// setPie3()

// 需求1:渲染班级概况;页面加载就直接渲染
axios({
        url: '/student/overview',
    })
    .then(({
        data: res
    }) => {
        if (res.code == 0) {
            // 渲染
            document.querySelector('.total').innerHTML = res.data.total
            document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
            document.querySelector('.avgAge').innerHTML = res.data.avgAge
            document.querySelector('.proportion').innerHTML = res.data.proportion
        }
    });


// 需求2:点击按钮,显示隐藏第几次成绩
//  切换显示隐藏:(通过类名.style.display)
let btn = document.querySelector('.bar .btn')
let ul = document.querySelector('#batch')
// 绑定事件,判断显示状态,进行显示与隐藏切换
btn.onclick = function () {
    if (ul.style.display === 'none') {
        ul.style.display = 'block';
    } else {
        ul.style.display = 'none';
    }
}
// 点击a链接/li标签,发送Ajax,渲染柱形图
let lis = document.querySelectorAll('.bar li')
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        // 发送Ajax
        axios({
            method: 'GET',
            url: '/score/batch',
            // 第几次成绩,这个属性
            params: {
                batch: i + 1
            }
        }).then(({
            data: res
        }) => {
            // console.log(res);
            // 判断业务状态码
            if (res.code == 0) {
                serBar(res.data)
            }
        })
    }
}
// 触发第一个li标签的事件
lis[0].click()
// 发送Ajax,获取所有学员信息,渲染折线图/饼形图/地图
axios({
        method: 'GET',
        url: '/student/list',
    })
    .then(({
        data: res
    }) => {
        if (res.code == 0) {
            // console.log(res);
            // 1.折线图制作 - 三个数组,放入一个对象中,方便传递
            let lineData = {
                name: [], // 姓名数组
                salary: [], // 期望薪资数组
                truesalary: [] // 实际薪资数组
            }

            // 2.饼图制作 - 一个数组,但是数组放入的是对象
            // [{value:40,name:'河北省'},{value:40,name:'河北省}]
            // 判断,数组中是否存在这个学生的省份,如果value+1,如果不存在添加一个对象
            // 因为后面需要修改value值,所以还需要获取索引值,干脆判断是否存在就直接判断索引值
            let pleData = []
            // 2.地图制作 - 一个对象
            // 一个对象:属性是地区,值是经纬组成的数组
            let mapData1 = {
                '顺义校区': [116.4551, 40.2539]
            }
            // 一个数组：里面的元素也是数组（二维数组），然后里面是对象
            //  [{value:0,name:'河北省'}]
            let mapData2 = []

            // 遍历res.data.把数据添加到指定的数组中
            res.data.forEach(item => {
                // 想姓名数组, 期望薪资数组,实际薪资数组中添加数据
                lineData.name.push(item.name)
                lineData.salary.push(item.salary)
                lineData.truesalary.push(item.truesalary)
                // 判断,数组中是否存在这个学生的省份,如果value+1,如果不存在添加一个对象
                // 因为后面需要修改value值,所以还需要获取索引值,干脆判断是否存在就直接判断索引值
                // 注意:饼图数组中某个元素的name属性如果和学生列表中某个省份相同,
                // 那么就返回饼形图数组中对象的索引值
                let index = pleData.findIndex(ele => ele.name == item.province)
                if (index == -1) {
                    // 数组不存在这个省;那就添加一个对象
                    pleData.push({
                        value: 1,
                        name: item.province
                    })
                } else {
                    // 数组中是否存在这个学生的省份,如果value+1,如果不存在添加一个对象
                    pleData[index].value++
                }
                // 循环里面,处理饼图两数据
                // 地图数据1:区域,坐标;(相同区域坐标值相同,然后可以把前面覆盖,这样剩下去了判断代码)
                //  let mapDatal = {'顺义校区': [116.4551, 40.2539]}
                mapData1[item.county] = [item.jing, item.wei]
                // 地图数据2:实现原理类似与饼图
                // 变量mapData2 数据类型 {[{value:0,name:'河北省'}]}
                // 判断:ele是一个数组,所以要使用里面的变量ele[0],然后判断他name和item.county是相同
                let i = mapData2.findIndex(ele => ele[0].name == item.county)
                if (i == -1) {
                    // 数组不存在这个省;那就添加一个对象
                    mapData2.push([{
                        value: 1,
                        name: item.county
                    }])
                } else {
                    // 数组中是否存在这个学生的省份,如果value+1,如果不存在添加一个对象
                    mapData2[i][0].value++ //mapData2[i]是指定元素,[0]是那到这个里面是对象
                }
            })
            // 渲染折线数据
            // console.log(lineData);
            setLine(lineData)
            setPie(pleData)
            setMap(mapData1, mapData2)
        }
    });